@use "sass:math";
@import "../../style/index.scss";

.create-plugin-repository {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  &__wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--gray-90);
  }

  &__description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 450px;

    .circle-badge i {
      color: var(--gray-80);
      font-size: 20px;
    }
  }

  &__description_top {
    margin-top: 24px;
  }

  &__description_bottom {
    margin-top: 8px;
  }

  h2 {
    @include title-24;
    text-align: center;
    margin: 0;
  }

  h3 {
    @include regular-14;
    text-align: center;
    margin: 0;
  }

  &__footer {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    background: var(--gray-70);
  }

  .amp-icon--size-small {
    font-size: 12px;
  }

  &__processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    height: 100%;
    background: var(--gray-full);

    &__message_title_container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    &__title {
      font-weight: 600;
      font-size: 24px;
      text-align: center;
      color: var(--gray-base);
    }

    &__message {
      font-size: 18px;
      line-height: 28px;
      color: var(--gray-20);
      margin-top: 4px;
      color: var(--gray-base);
    }

    &__tagline {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      font-size: 10px;
      line-height: 15px;
      color: var(--gray-20);
    }

    .svg-theme-image {
      width: 250px;
      height: 250px;
    }
  }
}
